<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
	<title>价格日历</title>
	<link rel="stylesheet" href="./css/tg_mobile_reset.css">
	<style>
		/**{margin: 0;padding: 0;}*/
		/*插件css*/
		html {font-size: 20px;}
		.week-wrap {width: 100%;margin-top: 0.5rem;}
		.week-wrap>li {float: left;width: 14.28%;text-align: center;font-size: 0.8rem;}
		#zc-month-wp>ul>li {display: flex;display: -webkit-flex;flex-direction: row;-webkit-flex-direction:row;}
		.month-title {width: 100%;text-align: center;font-size: 0.8rem;padding: 0.5rem 0;}
		.zc-week>.zc-day {/*float:left;*/width:14.28%;text-align:center;font-size:0.7rem;margin: 0.2rem 0;min-height: 2.5rem;padding:0.2rem 0.1rem;}
		.zc-week>.zc-day.curr-day {background-color: #13ae67;color: #fff;cursor: pointer;border-radius: 0.2rem;}
		.zc-data {font-size: 0.5rem;border-radius: 0.16rem;}
    
    
	</style>
	<style>
		/*具体文件css*/
		.zc-price {background-color: salmon;}
		.kucun-zc-test {background-color: #632c2c;}
		.children-price {background-color: #343486;margin: 0.1rem 0;}
		.word-color {color: #fff;}
		.zc-week>.zc-day.curr-day>div {background-color: #13ae67;color: #fff;}
	</style>
	<script src='http://zeptojs.com/zepto.min.js'></script>
	<script src="./lib/zc-price-calendar.js"></script>
</head>
<body>

	<div id="zc-calendar">
		<div id="zc-week-header">
			<ul class="clearfix week-wrap">
				<li>日</li>
				<li>一</li>
				<li>二</li>
				<li>三</li>
				<li>四</li>
				<li>五</li>
				<li>六</li>
			</ul>
		</div>
		<div id="zc-month-wp">
			
		</div>
	</div>
	<!-- <div id="qwe" class="asdasd   zxc">asdzxc</div> -->
	<!-- <script src="./lib/zepto.min.js"></script> -->
	<script>
		Zepto(document).ready(function() {
			var getPriceClendarData = function() {
				$.ajax({
					url:'http://106.14.19.71:9090/api/higo/pricedate',
					data:{higoId:513},
					success:function(res) {
						console.log(res);
						var data=[];
						var obj = {};
						if(res.code===0) {
							data = res.data;
							$.each(data, function(i, val) {
								obj[val.date]=[
									{tip:'￥',val:val.price,cls:'zc-price'},
									{tip:'童价:',val:val.childPrice,cls:'children-price word-color'},
									{tip:'库存:',val:val.stock,cls:'kucun-zc-test word-color'},
								]
							});
							var asd = new ZcCalendar({
								container:'zc-month-wp',
								// container:document.getElementById('zc-month-wp'),
								monthCount:6,
								priceJson:obj,
								// year:'2013',//起始年份
								// month:'8',//起始月份
								clkFn:function(curr_dom,prev_dom) {
									// console.log(curr_dom);
									// console.log(prev_dom);
									// if(curr_dom===prev_dom) {
									// 	console.log('===');
									// 	return;
									// }
									// $(prev_dom).addClass('curr-day');
									// $(curr_dom).removeClass('curr-day');
									$(curr_dom).addClass('curr-day');
									$(prev_dom).removeClass('curr-day');
									
								}
							});
						}else {
							console.log('code: '+res.code);
						}
					}
				})
			};
			getPriceClendarData();
		})
		/*
			第一版，做成只实例化一次，不能再次更改，故需价格日历对象，将日历与价格一次性渲染完毕

			第二版将做成先渲染日历，拿到价格日历数据后，调用函数的方法将日历数据渲染进去

			已优化：不会出现多余的一周
		*/

		/*Date.parse(year+'/'+month+1+'/'+4)||Date.parse(new Date(year,month+1,4))||new Date(year,month+1,4).getTime();返回year年，month+1月4号的时间戳,
		必须用'/'连接年月日，否则返回year年1月1日的时间戳@zc20171120*/
		// function ZcCalendar(opts) {
		// 	//指定渲染的内容放置的容器，要显示的起始年月(如不传将以当前系统时间为准)，要显示几个月
		// 	var _this = this;
		// 	var opts = opts||{},
		// 		currTime = new Date(),
		// 		//容器dom,可以传递id或者直接传递dom，暂不支持class
		// 		container = typeof opts.container==='string'?( document.getElementById(opts.container) ):(opts.container),
		// 		year = opts.year||currTime.getFullYear(),
		// 		month = opts.month||( currTime.getMonth()+1 ),//代表当前显示的月份，取值1~12
		// 		priceJson = opts.priceJson||{},
		// 		monthCount = opts.monthCount,//要显示几个月
		// 		clkFn = opts.clkFn,//点击天函数
		// 		tmpStr = '',
		// 		currDay = new Date(),
		// 		oTime=new Date( year,(month-1),1 ),//传递的起始年月||系统的当前年月
		// 		//每月的最大天数。getDate()获取日期
		// 		maxDay = new Date(year,month-1,0).getDate(),
		// 		//当月第一天是周几                                    
		// 		firstDay =oTime.getDay(),
		// 		//每一天是几号
		// 		evyDay = -1,
		// 		// 每一天的时间戳，以用来准备一个时间对象&与传递的priceJson比对
		// 		tmpDay = -1,
		// 		//每月最多6周
		// 		currWeekCount = 6,
		// 		// 每一天可能携带的信息
		// 		mayArr = [],
		// 		//每一天的集合
		// 		zcDivs = null,
		// 		zcDivLen = 0,
		// 		//以天为单位的时间戳(以系统时间为准)
		// 		today = Date.parse( currDay.getFullYear()+'/'+(currDay.getMonth()+1)+'/'+currDay.getDate() );

		// 		// $container=$(container)
		// 	for(var i=0;i<monthCount;i++) { //要展示的月数为monthCount
		// 		if(i===0) {
		// 			oTime = new Date(year,month-1);//当前月份的时间对象
		// 		}else {
		// 			oTime = new Date(year,month);
		// 		}
		// 		firstDay =oTime.getDay();//更新每月的第一天
		// 		year = oTime.getFullYear();//当month为12时跨年解决
		// 		month = oTime.getMonth()+1;//跨月解决
		// 		maxDay = new Date(year,month,0).getDate();
		// 		tmpStr+=(
		// 			'<ul>'+
		// 				'<li>'+
		// 					'<p class="month-title">'+year+'年'+month+'月</p>'+
		// 				'</li>'
		// 		);
		// 		// console.log(firstDay);
		// 		currWeekCount = weeks(firstDay,maxDay);
		// 		for(var j=0;j<currWeekCount;j++) {//最多六周一定可以展示一个月的所有日期@zc20171117
		// 			tmpStr+='<li class="zc-week clearfix" data-week='+i+'*'+j+'>';
		// 			for(var k=1;k<=7;k++){//每一周最多七天
		// 				evyDay = (k-firstDay) + (7*j);//依据第几周和当月的1号是周几来计算每一天是几号
		// 				// console.log(evyDay);
		// 				if(evyDay<1||evyDay>maxDay) { //非正常日期只用来站位不展示
		// 					tmpStr+='<div class="blank zc-day"></div>'
		// 				}else { //正常日期区分是今天还是非今天
		// 					// tmpDay = Date.parse(year+'/'+(month)+'/'+evyDay);
		// 					tmpDay = new Date(year,month-1,evyDay).getTime();
		// 					oTime = new Date(tmpDay);//更新时间对象
		// 					tmpStr += '<div id='+tmpDay+'';
		// 					mayArr = priceJson[tmpDay];
		// 					if(today==tmpDay) {//标志今天
		// 						tmpStr+=' class="curr-day zc-day">今天'
		// 					}else {
		// 						tmpStr+=' class=zc-day>'+evyDay;
		// 					}
		// 					if(mayArr) {
		// 						tmpStr+=renderPrice(mayArr);
		// 					}
		// 					tmpStr+='</div>'
		// 				}

		// 			};
		// 			tmpStr+='</li>';
		// 		}
		// 		tmpStr+='</ul>';

		// 	}

		// 	container.innerHTML = tmpStr;
		// 	zcDivs = container.getElementsByClassName('zc-day');
		// 	zcDivLen = zcDivs.length;
		// 	for(var n=0;n<zcDivLen;n++) {
		// 		zcDivs[n].addEventListener('click',function(ev) {
		// 			var high_day = container.getElementsByClassName('zc-day curr-day')[0];
		// 			if( _this.hasClass(this,'blank')||_this.hasClass(this,'curr-day') ) {//点击在无日期的div上或者已被选中的div上
		// 				clkFn(this,this);
		// 				return;
		// 			}
		// 			_this.removeClass(high_day,'curr-day');
		// 			_this.addClass(this,'curr-day');
		// 			clkFn(this,high_day);
		// 			return;
		// 		})
		// 	}
		// 	// $calendar.html(tmpStr);
		// 	// renderHighDay();
		// 	// $calendar.on('click','.zc-day',function() {
		// 		// var $this = $(this);
				
		// 		// if($this.hasClass('blank')) {
		// 		// 	console.log('blank');
		// 		// }else {
		// 		// 	console.log(this.id);
		// 		// }
		// 		// console.log($(this).attr('class'));
		// 		// $calendar.find('ul>li>div.curr-day').removeClass('curr-day');
		// 		// $(this).addClass('curr-day');
		// 		// clkFn(this);
		// 	// })
		// 	// container.addEventListener('click',function(ev) {
		// 	// 	// console.log(ev.path);
		// 	// 	var arr = ev.path;
		// 	// 	var len = arr.length;
		// 	// 	var currDom = null;
		// 	// 	var zcDay = null;
		// 	// 	for(var i=0;i<len;i++) {
					
		// 	// 		if(_this.hasClass(arr[i],'zc-day')) {
		// 	// 			currDom = arr[i];
		// 	// 			if( _this.hasClass(currDom,'blank')||_this.hasClass(currDom,'curr-day') ) {//点击在无日期的div上或者已被选中的div上
		// 	// 				clkFn(currDom,currDom);
		// 	// 				return;
		// 	// 			}
		// 	// 			zcDay = this.getElementsByClassName('zc-day curr-day')[0];//移动端不再考虑兼容性问题
						
		// 	// 			_this.removeClass(zcDay,'curr-day');
		// 	// 			_this.addClass(currDom,'curr-day');
		// 	// 			// renderHighDay();
		// 	// 			clkFn(currDom,zcDay);
		// 	// 			return;
		// 	// 		}
		// 	// 	}
		// 	// })

		// 	function weeks(firstDay,lastDay) {//根据月份第一天是周几，最后一天是几号，计算出当月的周数
		// 		var firstWeekDays = 7-firstDay+1;
		// 		var remainWeeks = Math.ceil( (lastDay-firstWeekDays)/7 );
		// 		return 1+remainWeeks;
		// 	}

		// 	function renderPrice(arr) {
		// 		var priceArr=[];
		// 		$.each(arr, function(i, obj) {
		// 			priceArr.push(
		// 				'<div data-tip='+obj.tip+' class="zc-data '+(obj.cls||'')+'">',
		// 					'<span>'+obj.tip+'</span>',
		// 					'<span>'+obj.val+'</span>',
		// 				'</div>'
		// 			);
		// 		});
		// 		return priceArr.join('');
		// 	}

		// 	function renderHighDay() {
		// 		//使得高亮的那一天的高度与该行中的最高高度相等，已用纯css实现（flex）
		// 		var highDay = document.getElementsByClassName('zc-day curr-day')[0];
		// 		var siblings = highDay.parentNode.getElementsByClassName('zc-day');
		// 		var len = siblings.length;
		// 		var maxH = 0;
		// 		var arr = [];
		// 		// var parH = par.offsetHeight;
		// 		// highDay.style.height=parH+'px';
		// 		for(var i=0;i<len;i++) {
		// 			arr.push(siblings[i].offsetHeight)
		// 		}
		// 		highDay.style.height=zcmax(arr)+'px';

		// 		function zcmax(arr) {
		// 			var l = arr.length;
		// 			var r = -10000;
		// 			for(var k=0;k<l;k++) {
		// 				if(r<arr[k]) {
		// 					r=arr[k];
		// 				}
		// 			}
		// 			return r;
		// 		}

		// 	}
		// 	this.hasClass = function(obj,cls) {
		// 		// var r = false;
		// 		// var obj_class = obj.className||' ';//获取 class 内容.  
		// 		// var obj_class_lst = obj_class.split(/\s+/);//通过split空字符将cls转换成数组.  
		// 		// var x = 0;  
		// 		// for(x in obj_class_lst) {  
		// 		// 	if(obj_class_lst[x] == cls) {//循环数组, 判断是否包含cls  
		// 		// 		r = true;  
		// 		// 	}  
		// 		// }  
		// 		// return r;
		// 		// console.log(obj.className +'clsname')
				
		// 		return obj?( ( obj.className||'').match(new RegExp("(\\s|^)" + cls + "(\\s|$)")) ):false;
				
		// 	};
		// 	this.addClass = function(obj,cls) {
		// 		var obj_class = obj.className;
		// 		if(!_this.hasClass(obj,cls)) {
		// 			obj_class +=' '+cls;//TODO每次都会添加一个空格进去
		// 			obj.className = obj_class;
		// 		}
		// 	};
		// 	this.removeClass = function(obj,cls) {
		// 		var reg;
		// 		if (_this.hasClass(obj, cls)) {   
		// 	        reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');  
		// 	        obj.className = obj.className.replace(reg, ' ');  
		// 	    }  
		// 	};
		// }
		
	</script>
	<!-- <script src="./lib/rem.js"></script> -->
	<script>
		function getLocalTimeByMs(timestamp,argu) {     //将时间戳（毫秒）转换成日期@zc170609
			var zc_new_date_obj = new Date( parseInt(timestamp) );
			var zc_year = zc_new_date_obj.getFullYear();
			var zc_month = ( zc_new_date_obj.getMonth() )+1;
			var zc_day = zc_new_date_obj.getDate();
			var resultStr = zc_year +'-'+zcAddZero(zc_month)+'-'+zcAddZero(zc_day);
			if(argu) {
				resultStr = zc_year +argu+zcAddZero(zc_month)+argu+zcAddZero(zc_day);
			}
			if(!zc_year || !zc_month ||  !zc_day) {
				resultStr = '暂无可选日期';
				return resultStr;
			}
			return resultStr;
			function zcAddZero(num) {
				return num<10?'0'+num:num;
			}
		}

		// 价格日历json，包含了所有要展示的信息（价格，库存等）以及对应的前缀提示文字
		// {
		// 	'1234567890000':[
		// 		{tip:'价格',val:'1299',cls:cls},
		// 		{tip:'库存',val:'99',cls:cls}
		// 	]	
			
		// }
	</script>
	<script>
		(function (doc, win) {    
	        var docEl = doc.documentElement,    
	        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',    
	        recalc = function () {    
	            var clientWidth = docEl.clientWidth;    
	            if (!clientWidth) return;    
	            docEl.style.fontSize = 20 * (clientWidth / 375) + 'px';    
	        };    
	        if (!doc.addEventListener) return;    
	        win.addEventListener(resizeEvt, recalc, false);    
	        doc.addEventListener('DOMContentLoaded', recalc, false);    
	    })(document, window)
	</script>
</body>

</html>
<!-- 
<ul>
	<li>
		<p class="month-title">2017年11月</p>
	</li>
	<li class="zc-week clearfix">
		<div class="zc-day" id="2017-11-16">1</div>
		<div class="zc-day on">
			<div>123</div>
			<div>456</div>
		</div>
		<div class="zc-day">3</div>
		<div class="zc-day">4</div>
		<div class="zc-day">5</div>
		<div class="zc-day">6</div>
		<div class="zc-day">7</div>
	</li>
</ul>
 -->
